<template>
    <div id="star" :class="starType">
        <span v-for="item in star" class="star-item" :class="item"></span>
    </div>
</template>

<script>
    const LENGTH = 5;
    const CLS_ON = 'on';
    const CLS_HALF = 'half';
    const CLS_OFF = 'off';

    export default {
        name: 'Star',
        props: ['size', 'score'],
        computed: {
            starType() {
                return `star-${this.size}`;
            },
            star() {
                let result = [];
                let score = Math.floor(this.score * 2) / 2;
                let hasDecimal = score % 1 !== 0;
                let integer = Math.floor(score);
                for (let i = 0; i < integer; i++) {
                    result.push(CLS_ON);
                }
                if (hasDecimal) result.push(CLS_HALF);
                while (result.length < LENGTH) {
                    result.push(CLS_OFF);
                }
                return result;
            }
        }
    }
</script>

<style scoped>
    .star {
        font-size: 0;
        display: inline-block;
    }

    .star-item {
        display: inline-block;
        background-repeat: no-repeat;
    }

    .star-48 .star-item {
        width: 20px;
        height: 20px;
        background-size: cover;
    }

    .star-48 .star-item + .star-item {
        margin-left: 22px;
    }

    .star-48 .star-item.on {
        background-image: url('img/star48_on@2x.png');
    }

    .star-48 .star-item.half {
        background-image: url('img/star48_half@2x.png');
    }

    .star-48 .star-item.off {
        background-image: url('img/star48_off@2x.png');
    }

    .star-36 .star-item {
        width: 15px;
        height: 15px;
        background-size: cover;
    }

    .star-36 .star-item + .star-item {
        margin-left: 6px;
    }

    .star-36 .star-item.on {
        background-image: url('img/star36_on@2x.png');
    }

    .star-36 .star-item.half {
        background-image: url('img/star36_half@2x.png');
    }

    .star-36 .star-item.off {
        background-image: url('img/star36_off@2x.png');
    }

    .star-24 .star-item {
        width: 10px;
        height: 10px;
        background-size: cover;
    }

    .star-24 .star-item + .star-item {
        margin-left: 3px;
    }

    .star-24 .star-item.on {
        background-image: url('img/star24_on@2x.png');
    }

    .star-24 .star-item.half {
        background-image: url('img/star24_half@2x.png');
    }

    .star-24 .star-item.off {
        background-image: url('img/star24_off@2x.png');
    }

    @media (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
        .star-48 .star-item.on {
            background-image: url('img/star48_on@3x.png');
        }

        .star-48 .star-item.half {
            background-image: url('img/star48_half@3x.png');
        }

        .star-48 .star-item.off {
            background-image: url('img/star48_off@3x.png');
        }

        .star-36 .star-item.on {
            background-image: url('img/star36_on@3x.png');
        }

        .star-36 .star-item.half {
            background-image: url('img/star36_half@3x.png');
        }

        .star-36 .star-item.off {
            background-image: url('img/star36_off@3x.png');
        }

        .star-24 .star-item.on {
            background-image: url('img/star24_on@3x.png');
        }

        .star-24 .star-item.half {
            background-image: url('img/star24_half@3x.png');
        }

        .star-24 .star-item.off {
            background-image: url('img/star24_off@3x.png');
        }
    }
</style>